<!-- 长视频 -->
<template>
  <div>
  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <div class="btn-class">
        <el-button type="danger" size="small" @click="delMoreGroup">
          删除
        </el-button>
      </div>
    </template>
    <!--发布类型-->
    <template v-slot:explanationSettings="{ row }">
      <div class="flex">
        <!--explanationSettings：1 自己上传 2 AI配音*-->
        <div :class="row.explanationSettings==1?'green-cls':'ai-cls'">{{row.explanationSettings==1 ? '自己上传'  : 'AI配音' }}</div>
      </div>
    </template>
    <template v-slot:status="{ row }">
      <div class="flex">
        <!--    status: 状态 1.未执行2.执行中' ——没有剪辑完成状态，剪辑中，即可生成视频 -->
        <div :class="row.status==1?'grey-cls':'green-cls'">{{row.status==1 ? '未剪辑'  : '剪辑中' }}</div>
      </div>
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="edit(row)"
        >
          编辑
        </el-link>
        <el-link
          type="warning"
          :underline="false"
          @click="generateVideo(row)"
        >
          生成视频
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
        <el-link
          type="success"
          :underline="false"
          @click="viewSlices( row)"
          :disabled="!row.finishProDuctFolderId"
        >
          查看成片
        </el-link>
      </div>
    </template>
  </ele-pro-table>

  <!--‘生成视频’ 弹框-->
  <generate-pieces
    ref="videoAdd"
    :visible.sync="videoVisible"
    @query="query"
  >
  </generate-pieces>
  </div>
</template>

<script>
  import { queryLongList,delLongList} from "@/api/creatCenter/longVideo";
  import {queryGenerated} from "@/api/creatCenter/piecemealManagement";
  import GeneratePieces from "@/views/creatCenter/authoringClips/components/generate-pieces";
  export default {
    components: {GeneratePieces},
    props: {
      // 表格数据
      activityList:Array | Object
    },
    data() {
      return {
        // '生成视频'弹窗是否打开
        videoVisible: false,
        editShow:false,
        activityShow:false,
        prizeShow:false,
        detailShow:false,
        ipLocation:'',
        // 当前编辑数据
        current: null,
        // datasource:[{activityName:'111',releaseChannel:'3r'}],
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
            {
              prop: 'clipName',
              label: '剪辑名称',
              align: 'center',
              width:209,
              showOverflowTooltip: true
            },
            /*{
              prop: 'explanationSettings',
              label: '解说类型',
              align: 'center',
              showOverflowTooltip: true,
              slot: 'explanationSettings',
            },*/
            {
              prop: 'count',
              label: '剪辑数量',
              align: 'center',
              showOverflowTooltip: true,
              formatter: (_row, _column, cellValue) => {
                return cellValue ? cellValue : '0';
              }
            },
            {
              slot: 'status',
              prop: 'status',
              label: '剪辑状态',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              prop: 'createTime',
              label: '创建时间',
              align: 'center',
              showOverflowTooltip: true
            },
          {
            label: '操作',
            columnKey: 'action',
            width: 412,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          groupType:1
        },
        // 表单验证规则
        rules: {
          groupName: [
            {
              required: true,
              message: '请输入分组名称',
              trigger: 'blur'
            }
          ],
          ipLocation: [
            {
              required: true,
              message: '请选择IP属地',
              trigger: 'blur'
            }
          ]
        },
        // 奖品id
        prizeId:null,
        // 1:D音 2:视频号 3:K手
        releaseChannel:0,
        columnData:{},// 为视频号时，选择的列数据
      };
    },
    created(){
    },
    // 路由刷新
    activated(){
      this.reload()
    },
    methods: {
      // 查询表格
      query(){
        console.log("1111111")
        this.reload()
      },
      /* 刷新————表格数据源 */
      /*datasource({ page, limit, where, order }) {
        return queryLongList({ ...where, ...order, page, limit,
            merchantId:this.$store.state.user.info.merchantId  // 商家id
             });
      },*/
      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async datasource({ page, limit, where, order }) {
        const result = await queryLongList({ ...where, ...order, page, limit,
          merchantId:this.$store.state.user.info.merchantId  // 商家id
        });
        console.log("r表格数据源esult============", result)

        return result.data;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      /*生成视频*/
      async generateVideo( row) {
        console.log('row========', row);
        this.videoVisible = true;
        this.$nextTick(()=>{
          this.$refs['videoAdd'].show(row,-1)
        })
      },

      // 查看成片
      viewSlices(row){
        // id: row.id  //1剪辑比例
        console.log("row.id ========", row.id,'row.finishProDuctFolderId',row.finishProDuctFolderId )
        // this.$router.push({path:'/creatCenter/piecemeal',query:{id: row.id }})
        this.$router.push({path:'/creatCenter/piecemeal',query:{projectId: row.finishProDuctFolderId,type:2 }})
      },

      // 删除
      delMoreGroup(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delGroups(ids)
      },
      /* 编辑 */
      edit (row) {
        console.log("点击编辑row22222======",row)
        this.$emit('edit',row.id)
      },
      /* 删除 */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该剪辑, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delLongList({
            ids:ids
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
    }
  };
</script>

<style scoped lang="less">

  /*表格头部按钮*/
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0;
      width: 94px;
      border-radius: 2px;
      height: 33px;
    }
  }

  .grey-cls,.green-cls,.ai-cls{
    padding: 4px 7px;
    border-radius: 2px;
  }
  /*未剪辑*/
  .grey-cls{
    color: #333;
    background-color: #F2F2F2;
  }
  /*剪辑完成*/
  .green-cls{
    color: #008B27;
    background-color: #C6FFD6;
  }
  /*AI配音*/
  .ai-cls{
    color: #1E6CEB;
    background: #DDF0FF;
  }

  /*IP属地背景*/
  .ip-bj{
    background: #DDF0FF;
    border-radius: 2px;
    height: 25px;
    line-height: 25px;
    color: #1E6CEB;
    padding:0 8px;
    display: inline-block;
  }
</style>
